/**
 * Copyright 2022 Redpanda Data, Inc.
 *
 * Use of this software is governed by the Business Source License
 * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
 *
 * As of the Change Date specified in that file, in accordance with
 * the Business Source License, use of this software will be governed
 * by the Apache License, Version 2.0
 */

@use "sass:selector";
@use "sass:string";

.wrapper {
    display: flex;
    flex-direction: column;
}

.content {
    flex-grow: 1;
    position: relative;
}

ul.navigationList {
    list-style: none;
    display: flex;
    margin: 0 0 1rem;
    padding: 0;
    border-bottom: solid thin #f0f0f0;

    li {
        flex: 1;
        min-width: 100px;
    }

    li>div.tabHeaderButton {
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: solid 2px transparent;
        transform: translateY(1px);
        padding: 9px;
        color: rgba(0, 0, 0, 0.8);
        cursor: pointer;


        transition: background-color 0.2s ease-out,
        color .2s ease-out;
        &.default:hover {
            color: var(--ant-primary-color);
            background: hsla(0, 0%, 50%, 0.03);
        }

        &.active {
            color: var(--ant-primary-color);
                border-bottom-color: var(--ant-primary-5);
                background: hsla(0, 0%, 50%, 0.03);
        }

        &.disabled {
            opacity: 0.25; // color: rgba(0, 0, 0, 0.25);
            cursor: default;
        }

        &.extra {
            flex: 1 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            background: red;

            &:empty,
            &:blank {
                display: none;
            }
        }
    }

}